import React, { Component } from "react";
import "./successlogin.css";
import logo from "../../../images/icon/1.png";
import welcome from "../../../images/icon/denglu.png";
import daifukuan from "../../../images/icon/daifukuan.png";
import daishouhuo from "../../../images/icon/daishouhuo.png";
import daofukuan from "../../../images/icon/daofukuan.png";
import tuihuanhuo from "../../../images/icon/tuihuanhuo.png";
import huizhidan from "../../../images/icon/huizhidan.png";
import cookie from "react-cookies";
import { Link } from "react-router-dom";
class Successlogin extends Component {
  constructor() {
    super();
    this.state = {
      time: 1,
      username: "",
      msg: ""
    };
  }
  componentWillMount() {
    let timeid = setInterval(() => {
      this.setState({
        time: this.state.time - 1
      });
      if (this.state.time == 0) {
        // clearInterval(timeid)
      }
    }, 1000);

    

    this.setState({
      username: "登录成功",
      msg: "退出"
    });
  }
  componentDidUpdate(prevProps, prevState) {
    //   console.log(this.state.time)
    if (this.state.time == 0) {
      document.getElementById("successLogin").style.display = "none";
    }
  }
  close() {
    if (cookie.load("uid")) {
      cookie.remove("uid");
      cookie.remove("pwd");
      cookie.remove("username");
      // window.opener.document.location.reload();
      this.setState({
        msg: "登录"
      });
    } else {
    }
  }
  render() {
    return (
      <div className="my-login">
        <div id="successLogin">
          <img src={logo} className="logoimg" alt="" />
          <h1 className="num">{this.state.time}秒之后关闭</h1>
          <span>立即跳转</span>
        </div>
        <div className="welcome">
          <img src={welcome} className="loginimgs" alt="" />
          <h1 className="commme">{this.state.username}</h1>
          <div className="m-property">
            <span>积分 -</span>
            <span>优惠券 -</span>
            <span>代金券 -</span>
          </div>
          <div className="m-menu">
            <div className="m-menu-t">
              <p className="psd" />
              <span className="span1">我的订单</span>
              <span className="span2">全部订单 ></span>
              <div className="fenqi">
                {/* <p className="skt"></p> */}
                <i className="items">
                  <strong className="strong1">
                    <img src={daifukuan} alt="" />
                  </strong>
                  <span>待付款</span>
                </i>
                <i className="items">
                  <strong className="strong1">
                    <img src={daishouhuo} alt="" />
                  </strong>
                  <span>待付款</span>
                </i>
                <i className="items">
                  <strong className="strong1">
                    <img src={daofukuan} alt="" />
                  </strong>
                  <span>待付款</span>
                </i>
                <i className="items">
                  <strong className="strong1">
                    <img src={tuihuanhuo} alt="" />
                  </strong>
                  <span>待付款</span>
                </i>
                <i className="items">
                  <strong className="strong1">
                    <img src={huizhidan} alt="" />
                  </strong>
                  <span>待付款</span>
                </i>
              </div>
              <p className="weihu">该页面维护中，请见谅</p>
            </div>
          </div>
        </div>
        <button className="close-ss" onClick={this.close.bind(this)}>
          <Link to="/home">{this.state.msg}</Link>
        </button>
      </div>
    );
  }
}

export default Successlogin;
